<template>
  <div class="detailPro">
    <!-- 商品图与价格概览 -->
    <div class="container">
      <div class="productImg">
        <div class="bigImg">
          <img :src="ImgUrl" />
        </div>
        <div class="littleImg">
          <ul v-for="item in imgUrl" :key="item.id">
            <li @click="getIndex(item.path)">
              <img :src="item.path" style="width: 50px; height: 50px" />
            </li>
          </ul>
        </div>
      </div>

      <div class="productInfo">
        <h2>{{ proInfo.name }}</h2>
        <p>{{ proInfo.desc }}</p>
        <div class="price">
          <div class="salePrice">¥{{ proInfo.sale_price }}</div>
          <div class="originalPrice">原价：¥{{ proInfo.price }}</div>
        </div>
        <div class="freight">
          <img
            src="https://www.tp-linkshop.com.cn/Content/themes/base/images/Product/freight.png"
            alt=""
          />
        </div>
        <div class="ifstock">
          <span class="startArr">发货地址：</span>广东 深圳
          <span>有货</span>
        </div>
        <div class="buyBtn">
          <el-input-number
            v-model="number"
            @change="handleChange"
            :min="1"
            :max="10"
            size="large"
          ></el-input-number>

          <div class="btnTobuy">立即购买</div>

          <div class="btnAddcart" @click="addCart">
            <i class="el-icon-shopping-cart-2"></i>加入购物车
          </div>
        </div>
        <div class="collect">
          <i class="el-icon-star-off"></i>
          <span class="cp">加入收藏</span>
        </div>
      </div>
    </div>

    <!-- 添加购物车成功弹窗提示 -->
    <div class="mask" v-if="maskFlag">
      <div class="maskBox">
        <div class="cancel" @click="maskShowFn">
          <i class="el-icon-close"></i>
        </div>
        <div class="maskText">
          <i class="el-icon-circle-check"></i>&nbsp;<span
            >{{ number }}件商品已经加入购物车</span
          >
        </div>
        <div class="maskBtn">
          <div class="backBuy">
            <router-link to="/">&lt;&nbsp;继续购物</router-link>
          </div>
          <div class="watchCart">
            <router-link to="/shopping"
              ><i class="el-icon-shopping-cart-2"></i>查看购物车</router-link
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 商品简介 -->
    <div class="descripition">
      <p>商品简介</p>
      <div v-html="proInfo.rich_text">{{ proInfo.rich_text }}</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { addCart } from "../../api/testApi/cartApi";

export default {
  prop: [],
  data() {
    return {
      // 小图的url
      imgUrl: [],
      //大图片默认显示的url
      ImgUrl: "",
      // 商品信息
      proInfo: [],
      number: 1,
      // 添加购物车成功的遮罩层默认隐藏
      maskFlag: false,
    };
  },
  methods: {
    //点击小图片时将图片路径赋值给大图
    getIndex(imgUrl) {
      this.ImgUrl = imgUrl;
    },
    handleChange(value) {
      console.log(this.number);
    },
    // 添加购物车函数
    async addCart() {
      let goods = {
        id: this.proInfo.id,
        name: this.proInfo.name,
        count: this.number,
        price: this.proInfo.price,
        imgUrl: this.ImgUrl,
      };
      console.log(goods);
      // 添加vuex购物车
      // this.$store.commit("carStore/addCarMutation", Object.assign({}, goods));

      // 重置vuex购物车数量
      // this.$store.commit(
      //   "carStore/changeNumberMutation",
      //   Object.assign({}, goods)
      // );

      // 同步添加到购物车api接口
      let token = this.$store.state.token;
      let data = {
        goods_id: this.proInfo.id,
        num: this.number,
        project_id: 90,
      };
      let res = await addCart(data, token);
      if (res.status == 200) {
        // 添加成功时弹出成功窗口
        this.maskFlag = true;
      } else {
        alert("购物车加入失败");
      }
    },
    maskShowFn() {
      this.maskFlag = false;
    },
  },
  created() {
    // 获取点击传来的id值
    let id = this.$route.query.id;
    // 获取商品详情信息
    axios({
      method: "GET",
      url: `http://shop.bluej.cn/api/goods/${id}`,
    })
      .then((res) => {
        this.imgUrl = res.data.result.s_goods_photos;
        //大图片默认显示第一张
        this.ImgUrl = res.data.result.s_goods_photos[0].path;
        this.proInfo = res.data.result;
        console.log(this.proInfo);
      })
      .then((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="scss" scoped>
.detailPro {
  width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
  .container {
    .productImg {
      width: 600px;
      display: inline-block;
      text-align: center;
      position: relative;
      margin-right: 50px;
      .bigImg {
        img {
          width: 540px;
          height: 540px;
          padding: 30px;
          border: 1px solid #e6e6e6;
        }
      }
      .littleImg {
        ul {
          display: inline-block;
          height: 58px;
          margin: 24px auto 48px;
          li {
            width: 56px;
            display: inline-block;
            margin-right: 5px;
            cursor: pointer;
            img {
              width: 56px;
              height: 56px;
              border: 1px solid #ccc;
              opacity: 0.5;
            }
          }
        }
      }
    }
    .productInfo {
      width: 520px;
      height: 700px;
      float: right;
      text-align: left;
      h2 {
        font-size: 30px;
        color: #333;
        letter-spacing: 0;
        line-height: 40px;
        font-weight: 400;
        margin-top: 30px;
      }
      > p {
        font-size: 18px;
        margin: 30px 0;
      }
      .price {
        width: 100%;
        height: 40px;
        margin: 16px 0;
        .salePrice {
          display: inline-block;
          font-size: 24px;
          color: #ff3232;
          line-height: 40px;
        }
        .originalPrice {
          display: inline-block;
          font-size: 14px;
          color: #666;
          height: 20px;
          margin: 10px 16px;
        }
      }
      .ifstock {
        margin: 24px 0;
        font-size: 16px;
        color: #333;
        line-height: 24px;
        .startArr {
          font-size: 14px;
          color: #666;
        }
        span {
          &:last-child {
            color: #0090ff;
            margin-left: 16px;
          }
        }
      }
      .buyBtn {
        .btnTobuy,
        .btnAddcart {
          border: 1px solid #ff3232;
          color: #ff3232;
          margin-left: 16px;
          border-radius: 2px;
          width: 130px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
          font-size: 16px;
          display: inline-block;
        }
        .btnAddcart {
          background: #ff3232;
          color: #fff;
          i {
            margin-right: 5px;
          }
        }
      }
      .collect {
        margin-top: 24px;
        height: 20px;
        width: 100px;
        cursor: pointer;
        i {
          margin: 2px 5px 0;
          font-size: 19px;
          color: #ff3232;
        }
      }
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999;
    .maskBox {
      width: 640px;
      height: 248px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-320px, -124px);
      background-color: #fff;
      z-index: 999999999;
      .cancel {
        position: absolute;
        top: 15.6px;
        right: 11.7px;
        cursor: pointer;
        font-size: 24px;
      }
      .maskText {
        font-size: 18px;
        color: #333;
        height: 24px;
        line-height: 24px;
        margin: 64px auto 48px;
        width: 260px;
        i {
          font-size: 22px;
          color: green;
        }
      }
      .maskBtn {
        .backBuy,
        .watchCart {
          border: 1px solid #ff3232;
          margin-left: 16px;
          border-radius: 2px;
          width: 160px;
          height: 50px;
          line-height: 55px;
          text-align: center;
          cursor: pointer;
          font-size: 16px;
          display: inline-block;
          a {
            color: #ff3232;
          }
        }
        .watchCart {
          background: #ff3232;
          a {
            color: #fff;
          }
        }
      }
    }
  }
  .descripition {
    border-top: 1px solid #ddd;
    padding: 10px 0;
    p {
      font-size: 18px;
      color: #333;
      height: 18px;
      padding: 20px 0;
      line-height: 18px;
    }
  }
}
</style>
